<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./js/bootstrap-table.min.js">
</head>
<body>
    <!-- 顶部导航 -->

<!-- 顶部导航 -->
<div class="container">
    <div class="row">
        <table class="table"></table>
    </div>
</div>

    <script src="./js/jquery.min.js"></script>
    <script src="./js/tableExport.min.js"></script>
    <script src="./js/jspdf.min.js"></script>
    <script src="./js/jspdf.plugin.autotable.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap-table.min.js"></script>
    <script src="./js/bootstrap-table-print.min.js"></script>
   <script src="./js/bootstrap-table-export.min.js"></script>
    <script>
        $(function(){
          load();

          $(".table").on("click",".glyphicon-remove",function(){
              var id = $(this).parent().attr("data-id");
              $.ajax({
                url:"http://localhost:3000/content",
                 type:"DELETE",
                 data:{_id:id},
                 success:function(res){
                     if(res.status===200){
                         load();
                     }
                 }
              })
          })

        


            function load(){
                
             $.ajax({
                 url:"http://localhost:3000/content",
                 type:"GET",
                 success:function(res) {
                     if(res.status===200) {
                        $('.table').bootstrapTable('destroy').bootstrapTable({
                     data: res.data,
                     //url:"请求地址" 数据源

                     pagination:true, //启用大小
                     pageSize: 3,//分页大小
                    //pageList:[5,10,20], //分页大小

                    showToggle:true,//列表视图
                     showPaginationSwitch:true,//分页开关
                     showFullscreen:true,//全屏显示
                     //showRefresh:true,//刷新，仅支持URL数据源
                    search:true,//启用查询
                     showSearchButton:true,//显示按钮
                     showPrint:true,//打印
                     showExport:true,//下载打印
                      
                     //列
                      columns: [{
                        field: '_id',
                        title: '编号'
                    }, {
                         field: 'title',
                         title: '标题'
                    }, {
                        field: 'content',
                        title: '内容'
                    },
                    {
                        field: 'top',
                        title: '是否置顶',
                        formatter:function (value,data){
                            //value 当前列的值
                            //data 当前行的数据
                            return value?"是":"否";
                        }
                        

                        

                    }
                            ,{
                    title:"操作",
                    formatter:function (value,data) {
                    return ` <a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-edit text-primary"></span></a>
                            <a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-remove text-danger"></span></a>
                        `;
                    }
                }
            
                ],
                
                    //自定义按钮集合
                    buttons: function() {
                                    return {
                                        btnAdd: {
                                            icon: 'glyphicon glyphicon-plus',
                                            event: function () {
                                                alert('添加')
                                            },
                                            attributes: {
                                                title: "add"
                                            }
                                        },
                                    
                                        btnDel: {
                                            icon: 'glyphicon glyphicon-remove',
                                            event: function () {
                                                alert('删除')
                                            },
                                            attributes: {
                                                title: "remove"
                                            }
                                        }
                                    }
                                }
                            })
                        
                       

                     }
                 }
             })
            }
        })
       
    </script>
</body>
</html>